<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <!-- 事件之后加prevent代表原来的行为会被阻止相当于event.preventDefault -->
        <a href="http://www.baidu.com" @click.prevent = "showInfo">点击</a>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        methods:{
            showInfo(){
                alert('调用')
            }
        }
    })
    //vue的事件修饰符，可以连续写
    // 1.prevent 阻止默认事件
    // 2.stop 阻止事件冒泡
    // 3.once 事件只触发一次
    // 4.capture 使用事件的捕获模式，正常是按照冒泡顺序从里到外，但是用这个就相当于按照捕获顺序来触发事件从外到内
    // 5.self 只有event.target是当前操作的元素才触发事件，即div包着一个button，你点button，那么target就是button，在div里面用click.self就不会冒泡触发，因为目标不是他
    // 6.passive 事件的默认行为为立即执行，无需等待事件回调执行完毕
    </script>
</body>
</html>